<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">比赛推荐</text>
    </view>
    
    <!-- 标签选择器 -->
    <view class="tab-selector">
      <view class="tab-item" 
            v-for="(tab, index) in tabs" 
            :key="index"
            :class="{active: currentTab === tab.value}"
            @click="switchTab(tab.value)">
        {{tab.name}}
      </view>
    </view>
    
    <!-- 近期推荐比赛 -->
    <block v-if="currentTab === 'recommend'">
      <view class="section-card">
        <view class="card-header">
          <text class="section-title">实力预测</text>
        </view>
        <view class="prediction-box">
          <view class="prediction-meter">
            <view class="meter-scale">
              <view class="scale-segment" v-for="i in 5" :key="i"></view>
            </view>
            <view class="meter-pointer" :style="{left: performanceLevel + '%'}"></view>
            <view class="meter-level" :style="{left: performanceLevel + '%'}">
              <text class="level-text">{{getPerformanceText()}}</text>
            </view>
          </view>
          <view class="prediction-desc">
            <text>根据近期练习表现，预计在NOIP省赛可能处于全省前{{30 + performanceLevel/2}}%水平</text>
          </view>
        </view>
      </view>
      
      <view class="section-title-bar">个性化推荐</view>
      
      <view class="competition-list">
        <view class="competition-item" v-for="(comp, index) in recommendCompetitions" :key="index">
          <view class="comp-header">
            <view class="comp-date">
              <text class="month">{{comp.month}}月</text>
              <text class="day">{{comp.day}}</text>
            </view>
            <view class="comp-info">
              <text class="comp-name">{{comp.name}}</text>
              <view class="comp-tags">
                <text class="comp-tag" v-if="comp.isOfficial">官方</text>
                <text class="comp-tag" v-if="comp.isOnline">线上</text>
                <text class="comp-tag level">{{comp.level}}</text>
              </view>
            </view>
          </view>
          <view class="comp-desc">
            <text>{{comp.description}}</text>
          </view>
          <view class="match-analysis">
            <view class="match-title">
              <text>契合度分析</text>
              <view class="match-stars">
                <uni-icons v-for="i in 5" :key="i" :type="i <= comp.matchLevel ? 'star-filled' : 'star'" size="14" :color="i <= comp.matchLevel ? '#ffcc33' : '#cccccc'"></uni-icons>
              </view>
            </view>
            <view class="match-reason">
              <text>{{comp.matchReason}}</text>
            </view>
          </view>
          <view class="comp-actions">
            <text class="action-btn detail" @click="viewCompDetail(comp)">查看详情</text>
            <text class="action-btn signup" @click="signupCompetition(comp)">立即报名</text>
          </view>
          <view class="signup-deadline">
            <uni-icons type="calendar" size="14" color="#f04864"></uni-icons>
            <text>报名截止: {{comp.deadline}}</text>
          </view>
        </view>
      </view>
    </block>
    
    <!-- 比赛日历 -->
    <block v-if="currentTab === 'calendar'">
      <view class="calendar-header">
        <view class="month-selector">
          <view class="arrow" @click="prevMonth">
            <uni-icons type="left" size="18" color="#333"></uni-icons>
          </view>
          <text class="current-month">{{currentYear}}年{{currentMonth}}月</text>
          <view class="arrow" @click="nextMonth">
            <uni-icons type="right" size="18" color="#333"></uni-icons>
          </view>
        </view>
      </view>
      
      <view class="calendar-grid">
        <view class="weekday-row">
          <text class="weekday" v-for="day in weekdays" :key="day">{{day}}</text>
        </view>
        <view class="days-grid">
          <view class="day-cell" 
               v-for="(day, index) in calendarDays" 
               :key="index"
               :class="{
                  'other-month': !day.currentMonth,
                  'competition-day': day.hasCompetition
               }"
               @click="viewDayEvents(day)">
            <text class="day-number">{{day.day}}</text>
            <view class="event-dot" v-if="day.hasCompetition"></view>
          </view>
        </view>
      </view>
      
      <view class="events-list" v-if="selectedDayEvents.length">
        <view class="events-header">
          <text class="events-date">{{selectedDay}} 日赛事</text>
        </view>
        <view class="event-item" v-for="(event, index) in selectedDayEvents" :key="index" @click="viewCompDetail(event)">
          <view class="event-time">{{event.time}}</view>
          <view class="event-content">
            <text class="event-title">{{event.name}}</text>
            <view class="event-tags">
              <text class="event-tag" v-if="event.isOfficial">官方</text>
              <text class="event-tag" v-if="event.isOnline">线上</text>
              <text class="event-tag level">{{event.level}}</text>
            </view>
          </view>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </block>
    
    <!-- 已报名比赛 -->
    <block v-if="currentTab === 'registered'">
      <view class="empty-state" v-if="registeredCompetitions.length === 0">
        <image class="empty-image" src="/static/empty-state.png" mode="aspectFit"></image>
        <text class="empty-text">暂无已报名比赛</text>
        <button class="empty-btn" @click="switchTab('recommend')">去查看推荐比赛</button>
      </view>
      
      <view v-else class="competition-list">
        <view class="competition-item" v-for="(comp, index) in registeredCompetitions" :key="index">
          <view class="comp-header">
            <view class="comp-date">
              <text class="month">{{comp.month}}月</text>
              <text class="day">{{comp.day}}</text>
            </view>
            <view class="comp-info">
              <text class="comp-name">{{comp.name}}</text>
              <view class="comp-tags">
                <text class="comp-tag" v-if="comp.isOfficial">官方</text>
                <text class="comp-tag" v-if="comp.isOnline">线上</text>
                <text class="comp-tag level">{{comp.level}}</text>
              </view>
            </view>
          </view>
          <view class="registration-info">
            <view class="info-item">
              <text class="info-label">报名状态</text>
              <text class="info-value" :class="comp.status === '已确认' ? 'status-success' : ''">{{comp.status}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">准考证号</text>
              <text class="info-value">{{comp.examId || '暂未分配'}}</text>
            </view>
            <view class="info-item">
              <text class="info-label">考试地点</text>
              <text class="info-value">{{comp.location || '待通知'}}</text>
            </view>
          </view>
          <view class="comp-actions">
            <text class="action-btn detail" @click="viewRegistrationDetail(comp)">查看详情</text>
            <text class="action-btn prepare" @click="navigateToPrepare(comp)">备赛指南</text>
          </view>
          <view class="comp-countdown" v-if="comp.daysLeft > 0">
            <text>距离比赛还有 </text>
            <text class="countdown-days">{{comp.daysLeft}}</text>
            <text> 天</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: "推荐比赛", value: "recommend" },
        { name: "比赛日历", value: "calendar" },
        { name: "已报名", value: "registered" }
      ],
      currentTab: "recommend",
      performanceLevel: 65, // 0-100之间的值
      
      // 推荐比赛数据
      recommendCompetitions: [
        {
          month: "10",
          day: "15",
          name: "NOIP 普及组",
          isOfficial: true,
          isOnline: false,
          level: "省级",
          description: "全国青少年信息学奥林匹克联赛普及组，适合初学者参加的官方比赛，在信息学竞赛中具有重要地位。",
          matchLevel: 5,
          matchReason: "根据你的练习记录和模拟赛表现，算法基础扎实，已经掌握了大部分NOIP基础知识点，非常适合参加此比赛。",
          deadline: "2023年10月1日"
        },
        {
          month: "11",
          day: "20",
          name: "CSP-J 认证",
          isOfficial: true,
          isOnline: false,
          level: "国家级",
          description: "计算机软件能力认证，J级适合初学者，测试基本编程能力和问题解决能力。",
          matchLevel: 4,
          matchReason: "你的编程基础较好，数据结构掌握扎实，但在算法方面还有提升空间，适合参加此认证提升竞争力。",
          deadline: "2023年11月5日"
        },
        {
          month: "12",
          day: "5",
          name: "蓝桥杯模拟赛",
          isOfficial: false,
          isOnline: true,
          level: "校级",
          description: "蓝桥杯算法竞赛的模拟训练赛，难度适中，可以作为正式比赛前的热身。",
          matchLevel: 3,
          matchReason: "基于你的学习进度，参加这个模拟赛可以检验实际应用能力，掌握比赛节奏，为后续的正式比赛做准备。",
          deadline: "2023年11月30日"
        }
      ],
      
      // 已报名比赛
      registeredCompetitions: [
        {
          month: "9",
          day: "25",
          name: "NOIP 模拟赛",
          isOfficial: false,
          isOnline: true,
          level: "校级",
          status: "已确认",
          examId: "MS2023091501",
          location: "线上考试",
          daysLeft: 12
        }
      ],
      
      // 日历相关
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      selectedDay: new Date().getDate(),
      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
      calendarDays: [],
      selectedDayEvents: []
    };
  },
  mounted() {
    this.generateCalendarDays();
  },
  methods: {
    switchTab(tab) {
      this.currentTab = tab;
      if (tab === 'calendar') {
        this.generateCalendarDays();
      }
    },
    
    getPerformanceText() {
      if (this.performanceLevel >= 80) return "优秀";
      if (this.performanceLevel >= 60) return "良好";
      if (this.performanceLevel >= 40) return "中等";
      return "需努力";
    },
    
    viewCompDetail(comp) {
      uni.navigateTo({
        url: `/pages/competition/detail?id=${comp.name}`
      });
    },
    
    signupCompetition(comp) {
      uni.navigateTo({
        url: `/pages/competition/signup?id=${comp.name}`
      });
    },
    
    viewRegistrationDetail(comp) {
      uni.navigateTo({
        url: `/pages/competition/registration?id=${comp.name}`
      });
    },
    
    navigateToPrepare(comp) {
      uni.navigateTo({
        url: `/pages/plan/index?competitionId=${comp.name}`
      });
    },
    
    // 日历相关方法
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
      this.generateCalendarDays();
    },
    
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
      this.generateCalendarDays();
    },
    
    generateCalendarDays() {
      const days = [];
      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1);
      const lastDay = new Date(this.currentYear, this.currentMonth, 0);
      const daysInMonth = lastDay.getDate();
      
      // 前一月的补位
      const firstDayWeekday = firstDay.getDay();
      if (firstDayWeekday > 0) {
        const prevMonthLastDay = new Date(this.currentYear, this.currentMonth - 1, 0).getDate();
        for (let i = 0; i < firstDayWeekday; i++) {
          days.push({
            day: prevMonthLastDay - firstDayWeekday + i + 1,
            currentMonth: false,
            hasCompetition: false
          });
        }
      }
      
      // 当月的日期
      for (let i = 1; i <= daysInMonth; i++) {
        // 模拟数据：每月5、15、25日有比赛
        const hasCompetition = (i === 5 || i === 15 || i === 25);
        days.push({
          day: i,
          currentMonth: true,
          hasCompetition
        });
      }
      
      // 下一月的补位
      const lastDayWeekday = lastDay.getDay();
      if (lastDayWeekday < 6) {
        for (let i = 1; i <= 6 - lastDayWeekday; i++) {
          days.push({
            day: i,
            currentMonth: false,
            hasCompetition: false
          });
        }
      }
      
      this.calendarDays = days;
    },
    
    viewDayEvents(day) {
      if (!day.currentMonth || !day.hasCompetition) {
        this.selectedDayEvents = [];
        return;
      }
      
      this.selectedDay = day.day;
      
      // 模拟数据
      this.selectedDayEvents = [
        {
          time: "09:00-12:00",
          name: "NOIP入门训练赛",
          isOfficial: false,
          isOnline: true,
          level: "校级"
        },
        {
          time: "14:30-17:30",
          name: "CSP-J 模拟赛",
          isOfficial: false,
          isOnline: true,
          level: "省级"
        }
      ];
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  padding: 20rpx 0 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.tab-selector {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #1890ff;
  font-weight: bold;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 6rpx;
  background-color: #1890ff;
  border-radius: 3rpx;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.prediction-box {
  padding: 10rpx 0;
}

.prediction-meter {
  position: relative;
  height: 60rpx;
  margin: 40rpx 0;
}

.meter-scale {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #eee;
  display: flex;
  justify-content: space-between;
}

.scale-segment {
  width: 4rpx;
  height: 12rpx;
  background: #ddd;
  transform: translateY(-50%);
}

.meter-pointer {
  position: absolute;
  top: 0;
  width: 12rpx;
  height: 12rpx;
  background: #1890ff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.meter-level {
  position: absolute;
  top: 20rpx;
  transform: translateX(-50%);
}

.level-text {
  background: #1890ff;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.prediction-desc {
  text-align: center;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.section-title-bar {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  padding: 0 10rpx;
}

.competition-list {
  margin-bottom: 30rpx;
}

.competition-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.comp-header {
  display: flex;
  margin-bottom: 16rpx;
}

.comp-date {
  width: 80rpx;
  height: 80rpx;
  background-color: #f04864;
  color: #fff;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.month {
  font-size: 22rpx;
}

.day {
  font-size: 36rpx;
  font-weight: bold;
}

.comp-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.comp-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.comp-tags {
  display: flex;
}

.comp-tag {
  font-size: 22rpx;
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 2rpx 12rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}

.comp-tag.level {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
}

.comp-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

.match-analysis {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;
}

.match-title {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
  font-size: 26rpx;
  color: #333;
}

.match-stars {
  margin-left: 12rpx;
}

.match-reason {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.comp-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
  margin-bottom: 10rpx;
}

.action-btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  margin-left: 20rpx;
}

.detail {
  color: #666;
  background-color: #f0f0f0;
}

.signup {
  color: #fff;
  background-color: #1890ff;
}

.prepare {
  color: #fff;
  background-color: #2fc25b;
}

.signup-deadline {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #f04864;
}

.calendar-header {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  padding: 24rpx;
  margin-bottom: 2rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.month-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.current-month {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.calendar-grid {
  background-color: #fff;
  border-radius: 0 0 16rpx 16rpx;
  padding: 0 24rpx 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.weekday-row {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 16rpx;
}

.weekday {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

.days-grid {
  display: flex;
  flex-wrap: wrap;
  padding-top: 16rpx;
}

.day-cell {
  width: 14.28%;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 10rpx;
}

.day-number {
  font-size: 28rpx;
  color: #333;
}

.other-month .day-number {
  color: #ccc;
}

.competition-day .day-number {
  color: #1890ff;
  font-weight: bold;
}

.event-dot {
  position: absolute;
  bottom: 6rpx;
  width: 8rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background-color: #1890ff;
}

.events-list {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.events-header {
  margin-bottom: 16rpx;
}

.events-date {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.event-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.event-item:last-child {
  border-bottom: none;
}

.event-time {
  font-size: 24rpx;
  color: #333;
  width: 150rpx;
}

.event-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.event-tags {
  display: flex;
}

.event-tag {
  font-size: 20rpx;
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.event-tag.level {
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
}

.registration-info {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx;
  margin-bottom: 16rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 26rpx;
  color: #666;
}

.info-value {
  font-size: 26rpx;
  color: #333;
}

.status-success {
  color: #2fc25b;
}

.comp-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #666;
}

.countdown-days {
  margin: 0 8rpx;
  color: #f04864;
  font-size: 30rpx;
  font-weight: bold;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.empty-btn {
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #fff;
  background-color: #1890ff;
}
</style> 